<template>
  <div class="collect-content">
    <van-nav-bar
      class="page-nav-bar"
      title="关注的品牌"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    >
      <van-icon v-if="list.length" slot="right" @click="clearAll" name="delete-o" />
    </van-nav-bar>
    <!-- 空内容 -->
    <van-empty v-if="list.length===0 && !error && !loading" description="您没有关注的品牌信息了" />
    <!-- 列表 -->
    <van-list v-model="loading" :error.sync="error" :finished="finished"  :finished-text="list.length ? '没有更多了':''"  @load="initData">
      <div class="item"  v-for="item in list" :key="item.id">
         <van-swipe-cell >
           <van-cell is-link center :to="'/brand/detail?id='+item.brandId">
             <div slot="title" class="title">
                <van-image width="40" height="40" :src="item.brandLogo"></van-image>
                <span class="tit">{{item.brandName}}</span>
             </div>
             <span>{{item.createTime  | formateTime}}</span>
           </van-cell>
          <template #right>
            <van-button square text="删除" @click="delAttention(item)" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </van-list>
    
  </div>
</template>
<script>
import { getAttentionList,deleteAttention,clearAttention } from "@/api/brand";
export default {
  data() {
    return { 
      list: [],
      query:{
        pageNum:1,
        pageSize:10
      },
      loading:false,
      finished:false,
      error:false,
      total:0 
    };
  },
  filters:{
    formateTime(val){
      return new Date(val).toLocaleDateString()
    }
  },
  methods: {
    // 初始化数据
    async initData(){
      try {
        let {list,total} = await getAttentionList(this.query)
        this.list.push(...list)
        this.total = total
        if(this.list.length === this.total){
          this.finished = true
        }else{
          this.query.pageNum++
        }
      } catch (error) {
        console.log(error);
        this.error = true
      }
      this.loading = false
    },
    // 删除品牌关注
    async delAttention({productId}){
      await this.$dialog.confirm({title:'提示',message:'确定删除吗？'})
      await deleteAttention({productId})
      this.$toast.success('删除成功')
      this.list = this.list.filter(item=>item.productId !==productId)
    },
    // 删除所有
    async clearAll(){
      if(this.list.length === 0) return
      await this.$dialog.confirm({title:'提示',message:'确定清空所有关注品牌吗？滑动可删除单个'})
      await clearAttention()
      this.$toast.success('清除成功')
      this.list = []
    }
  },
};
</script>

<style lang="less" scoped>
.collect-content{
  padding-top: 92px;
}
.delete-button {
    height: 100%;
  }
.item{
    margin-bottom: 4px;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
    background-color: #fff;
    .title{
      display: flex;
      align-items: center;
      .tit{
        margin-left: 20px;
        font-size: 30px;
      }
    }
  }
</style>